import React from 'react';
import { Row, Icon } from 'antd';
import {
    WeaLocaleProvider,
    WeaHelpfulTip,
    WeaBrowser,
} from 'ecCom';
import { observer, inject } from 'mobx-react';

const { getLabel } = WeaLocaleProvider;

@inject('edcPublishStore')
@observer
export default class RemindPerson extends React.Component {
    MsgPerson = React.createRef();
    ApplyFormPerson = React.createRef();

    constructor(props) {
        super(props);

        this.store = props.edcPublishStore;

        let { dataMsgReminder, dataApplyPerson } = this.store.publishSettings;
        dataMsgReminder = dataMsgReminder || JSON.stringify([]);
        dataApplyPerson = dataApplyPerson || JSON.stringify([]);

        this.state = {
            dataMsgReminder: JSON.parse(dataMsgReminder),
            dataApplyPerson: JSON.parse(dataApplyPerson),
        };
    }

    onChange = (key, value) => {
        const { onSetChange } = this.store;

        onSetChange(key, value);
    }

    showMsgPersonModal = () => {
        this.MsgPerson.current.openModal();
    }

    showApplyPersonModal = () => {
        this.ApplyFormPerson.current.openModal();
    }

    onRemindPersonChange = (ids, names, datas) => {
        const { dataMsgReminder } = this.state;
        const ind = dataMsgReminder.findIndex(person => Number(person.id) === -1);
        const persons = datas.map(person => ({ id: person.id, name: person.name }));

        if (ind >= 0) {
            persons.unshift({ id: '-1', name: '应用创建人' });
        }

        this.setState({ dataMsgReminder: persons });
        this.onChange('dataMsgReminder', persons);
    }

    onApplyPersonChange = (ids, names, datas) => {
        const { dataApplyPerson } = this.state;
        const ind = dataApplyPerson.findIndex(person => Number(person.id) === -1);
        const persons = datas.map(person => ({ id: person.id, name: person.name }));

        if (ind >= 0) {
            persons.unshift({ id: '-1', name: '应用创建人' });
        }

        this.setState({ dataApplyPerson: persons });
        this.onChange('dataApplyPerson', persons);
    }

    delRemindPerson = (id) => {
        const { dataMsgReminder } = this.state;
        const ind = dataMsgReminder.findIndex(person => person.id === id);

        dataMsgReminder.splice(ind, 1);
        this.setState({ dataMsgReminder });
        this.onChange('dataMsgReminder', dataMsgReminder);
    }

    delApplyPerson = (id) => {
        const { dataApplyPerson } = this.state;
        const ind = dataApplyPerson.findIndex(person => person.id === id);

        dataApplyPerson.splice(ind, 1);
        this.setState({ dataApplyPerson });
        this.onChange('dataApplyPerson', dataApplyPerson);
    }

    render() {
        let { dataMsgReminder, dataApplyPerson } = this.state;
        const reminderReplaces = dataMsgReminder.filter(person => Number(person.id) !== -1);
        const applyRelaces = dataApplyPerson.filter(person => Number(person.id) !== -1);

        return (
            <div>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mxl5vj`} className="header">{getLabel(522820, '消息提醒接收人设置')}</Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@mejfor`}>{getLabel(522821, '数据提交提醒接收人')}：</Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@3dycht`}>
                    <span className="wea-edc-remind-browser">
                        <span>
                            {
                                dataMsgReminder.map(person => (<span className="person">
                                        { person.id !== '-1' ?
                                            <a href={`javaScript:openhrm(${person.id})`} onClick={e => window.pointerXY(e)} >{person.name}</a>
                                            : <a >{person.name}</a>
                                        }
                                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@oicmkm@${person.id}`} type="cross" onClick={() => this.delRemindPerson(person.id)} />
                                    </span>))
                            }
                        </span>
                        <i className="anticon anticon-search" onClick={this.showMsgPersonModal} />
                    </span>
                    <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@b4n8of`} title={getLabel(522822, '当有新的填报数据时，会发送消息提醒给此处设置的接收人。此处默认接收人是应用创建者，可设置为其他多个人，或者不设置(即不发送消息提醒)')} placement="top" />
                </Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@9oqw1l`}>{getLabel(522823, '表单填写权限申请处理人')}：</Row>
                <Row ecId={`${this && this.props && this.props.ecId || ''}_Row@b3bhxc`}>
                    <span className="wea-edc-remind-browser">
                        <span>
                            {
                                dataApplyPerson.map(person => (<span className="person">
                                        {person.id !== '-1' ?
                                            <a href={`javaScript:openhrm(${person.id})`} onClick={e => window.pointerXY(e)} >{person.name}</a>
                                            : <a >{person.name}</a>
                                        }
                                    <Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@7umm64@${person.id}`} type="cross" onClick={() => this.delApplyPerson(person.id)} />
                                    </span>))
                            }
                        </span>
                        <i className="anticon anticon-search" onClick={this.showApplyPersonModal} />
                    </span>
                    <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@z73zk2`} title={getLabel(522824, '当有人申请表单填写权限时，会发送消息提醒给此处设置的处理人。此处默认处理人是应用创建者，可设置为其他多个人，但至少要设置1个人')} placement="top" />
                </Row>
                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@z3txma`}
                  className="wea-edc-browser-hide"
                  ref={this.MsgPerson}
                  type={17}
                  title={getLabel(516509, '多人力资源')}
                  icon="icon-coms02-Data-center"
                  iconBgcolor="#1a57a0"
                  hasAdvanceSerach={true}
                  pageSize={30}
                  selectedAllMaxLength={500}
                  isSingle={false}
                  replaceDatas={reminderReplaces}
                  onChange={this.onRemindPersonChange}
                />
                <WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@zxhqbd`}
                  className="wea-edc-browser-hide"
                  ref={this.ApplyFormPerson}
                  type={17}
                  title={getLabel(516509, '多人力资源')}
                  icon="icon-coms02-Data-center"
                  iconBgcolor="#1a57a0"
                  hasAdvanceSerach={true}
                  pageSize={30}
                  selectedAllMaxLength={500}
                  isSingle={false}
                  replaceDatas={applyRelaces}
                  onChange={this.onApplyPersonChange}
                />
            </div>
        );
    }
}
